<script>
  import EChart from '@comp/echart/EChart'

  export default {
    name: 'BarChart',
    extends: EChart,
    data() {
      return {
        option: {
          grid: {
            containLabel: true
          },
          xAxis: {
            max: 'dataMax',
            min: function(value) {
              if (value.max === 0) {
                return 10
              }
            },
            minInterval: 1,
            axisLabel: {
              fontSize: 16
            }
          },
          yAxis: {
            type: 'category',
            data: [],
            inverse: true,
            animationDuration: 300,
            animationDurationUpdate: 300,
            axisLabel: {
              fontSize: 16
            }
          },
          series: [
            {
              realtimeSort: true,
              name: '人数',
              type: 'bar',
              data: [],
              label: {
                show: true,
                position: 'right',
                valueAnimation: true,
                fontSize: 16
              }
            }
          ],
          legend: {
            show: true,
            textStyle: {
              fontSize: 16
            }
          },
          animationDuration: 0,
          animationDurationUpdate: 3000,
          animationEasing: 'linear',
          animationEasingUpdate: 'linear'
        }
      }
    },
    mounted() {
      this.initData()
    },
    methods: {
      setData(yAxisData, seriesData) {
        this.option.yAxis.data = yAxisData
        this.option.series[0].data = seriesData
        this.updateOption()
      }
    }
  }
</script>

<style lang="less" scoped>
</style>
